<template>
    <div class="dispatch-order-order">
        <div class="noworder-title">
            <span>运单调度</span>
        </div>
        <div class="dispatch-order-tab" v-if="myValue.objData">
            <div class="dispatch-tab"  @click="myValue.checkIndex = '0'">
                <div class="bordert" :class="myValue.checkIndex == '0'?'bgcolor':''" ></div>
                <div class="dispatch-tab-title" :class="myValue.checkIndex == '0'?'color000':''" >待调度</div>
                <div class="dispatch-tab-num" :class="myValue.checkIndex == '0'?'color1989FA':''">{{myValue.objData.unassigned?myValue.objData.unassigned.count:'0'}}</div>
            </div>
            <div class="dispatch-tab"  @click="myValue.checkIndex = '1'">
                <div class="bordert" :class="myValue.checkIndex == '1'?'bgcolor':''" ></div>
                <div  class="dispatch-tab-title" :class="myValue.checkIndex == '1'?'color000':''" >已调度</div>
                <div class="dispatch-tab-num " :class="myValue.checkIndex == '1'?'color1989FA':''">{{myValue.objData.assigned?myValue.objData.assigned.count:'0'}}</div>
            </div>
        </div>
        <div style="padding: 0 16px">
            <lar-table
                    model="express.order"
                    canAdd="canAdd"
                    action="base.table.dispatch"
                    class="border"
                    @handelButton="handelButton">
                <div slot="dispatchOrder" v-if="myValue.navList">
                    <div style="border-bottom: 1px solid #ebeef5;position:relative;top: -1px;margin:0 -30px;padding-left: 30px">
                        <el-radio-group v-model="myValue.current" >
                            <el-radio-button  :label="tab.type" v-for="(tab,index) in myValue.navList" :key="index">
                                {{tab.name}} ({{tab.count}})
                            </el-radio-button>
                        </el-radio-group>
                    </div>
                </div>
                <div slot="dispatchMap" slot-scope="data" style="padding: 24px 0">
                    <el-button type="default" size="mini" class="distrube-btn" @click="seeDistributionMap(data)">查看运单分布图</el-button>
                    <!--<el-button type="primary" size="mini" @click="handelPiLiang(data)">批量指派({{data.data.tableSelect.length}})</el-button>-->
                </div>
            </lar-table>
        </div>

    </div>
</template>
<script>
  import {manyHander} from '../../../../../init/handerButton'

  export default {
    mixins:[manyHander],
    props: {
            value: {
                type: Object,
                default: ()=>{
                    return {}
                }
            }
        },
        components: {},
        data() {
            return {
                current: '',
                isPhone: false,
                timer:null,
                checkIndex: '',
                checkedOrderId: [],
                myValue: {}
            }
        },
        computed: {
            dataRefreshDialog() {
                return this.$store.state.num;
            },
        },
        watch: {
            myValue:function (val) {
                this.$emit('input', this.myValue);
            },
            value:function (val) {
                this.myValue = this.value;
            },
            dataRefreshDialog: function(newValue) {
                this.getTableData(this.myValue.current);
            }
        },
        mounted() {
            this.current = this.value.current;
            this.checkIndex = this.value.checkIndex;
            this.myValue = this.value;
            this.getTableData(this.current,this.checkIndex);
        },
        methods: {
            getTableData(val1,val2) {
                let data = {
                    orderDispatchStatus: {
                        value: val1,
                        searchModel: "equal",
                        page: 1
                    },
                    dispatchType: {
                        value: val2,
                        searchModel: "equal",
                        page: 1
                    }
                };
                this.$store.commit('pipe', {'value': data, 'name': 'express.order.table'});
            },
            handelPiLiang(val) {
                // 批量指派
                this.checkedOrderId = [];
                if (val.data.tableSelect.length === 0) {
                    this.$message({
                        message: '未选择任何运单',
                        type: 'warning'
                    });
                } else {
                    val.data.tableSelect.forEach(item => {
                        this.checkedOrderId.push(item.id);
                    });
                    this.$router.push({path:'/dialog/assign/express.order/' + this.checkedOrderId});
                }
            },
            seeDistributionMap(val){
                this.checkedOrderId = [];
                if (val.data.tableSelect.length === 0) {
                    this.$message({
                        message: '未选择任何运单',
                        type: 'warning'
                    });
                } else {
                    val.data.tableSelect.forEach(item => {
                        this.checkedOrderId.push(item.id);
                    });
                    this.$router.push({path:'/dialog/see/express.order/' + this.checkedOrderId});
                }
            }

        }
    }
</script>
<style lang="less">
    .dispatch-order-order {
        box-sizing: border-box;
        margin: 0 10px;
        background: #fff;
        .el-radio-button__orig-radio:checked + .el-radio-button__inner{
            background: #fff !important;
            box-sizing: border-box;
            font-weight: 400 !important;
            color: #009688 !important;
            border-color: #dcdfe6 !important;
            box-sizing: border-box !important;
            border-bottom:none !important;
            position: relative;
            top: 1px;
        }
        .el-radio-button, .el-radio-button__inner{
            height: 40px;
        }
        .el-radio-button__inner {
            padding: 12px 25px;
            border-radius:2px !important;
            border-bottom: none;
            border-color: rgba(238,238,238,1);
        }
    }
    .dispatch-order-order{
        margin:0px;
        background-color: #fff;

        .noworder-title{
            font-size: 16px;
            padding: 10px 0 6px 16px;
            margin-bottom: 2px;
            border-bottom: 2px solid #f4f4f4;
        }
        .dispatch-order-tab{
            display: flex;
            padding-left: 16px;
            margin: 30px 10px 40px 0px;
            .dispatch-tab{
                box-sizing: border-box;
                width: 130px;
                height: 63px;
                margin-right: 36px;
                box-shadow:0px 2px 4px 0px rgba(0,0,0,0.06);
                border-radius:4px;
                /*border:1px solid rgba(0,0,0,0.06);*/
                overflow: hidden;
                text-align: center;
                .bordert{
                    width:130px;
                    height:4px;
                    background-color: #BCBCBE;
                    border-radius:4px 4px 0px 0px;
                }
                .bgcolor{
                    background-color: #009688;
                }
            }
            .dispatch-tab-num{
                font-size:24px;
                line-height:33px;
            }
            .dispatch-tab-title{
                font-size:14px;
                line-height: 20px;
                padding-top: 4px;
            }
            .color1989FA{
                color: #009688;
            }
            .color000{
                color: #000;
            }
            .dispatch-tab:hover{
                cursor: pointer;
            }
            .dispatch-tab:hover .dispatch-tab-title{
                color: #000;
            }
            .dispatch-tab:hover .dispatch-tab-num{
                color: #009688;
            }
            .dispatch-tab:hover .bordert{
                 background-color: #009688;
            }
        }
    }
    .dispatch-order-order{
        .distrube-btn{
            background: rgba(0,150,136,0.05);
            border: 1px solid #009688;
            color: #009688;
        }
        .distrube-btn:hover{
            color: #5FB878;
            border: 1px solid #5FB878;
        }
    }

</style>

